<template>
  <div class="table-container">

    <div class="filter-div">
      <el-date-picker
        v-model="timeFilter"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        unlink-panels
        :picker-options="pickerOptions"
      />
      <el-button type="primary" style="margin-left:20px" @click="timeQuery">查询</el-button>
      <el-button type="warning" @click="handeleOutExportExcel">导出</el-button>
    </div>
    <el-table
      :data="showOrderList"
      style="width: 100%"
      highlight-current-row
    >
      <template slot="empty">
        <p>{{ dataText }}</p>
      </template>

      <el-table-column prop="id" label="id" sortable />
      <el-table-column
        prop="status"
        label="订单状态"
        width="120"
        align="center"
        :filters="options"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">未支付</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">已支付</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">已发货</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="warning">已取消</el-tag>
          <el-tag v-else-if="scope.row.status === 4" type="success">已完成</el-tag>
          <el-tag v-else-if="scope.row.status === 5" type="warning">已超时</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="购买单价">
        <template slot-scope="scope">
          <span>{{ scope.row.price | num2Point }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="购买数量" />
      <el-table-column label="总金额">
        <template slot-scope="scope">
          <span>{{ scope.row.price * scope.row.num | num2Point }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toDetail(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-bottom:50px">
      <el-pagination
        :current-page.sync="getOrderForm.current"
        :page-size="getOrderForm.size"
        layout="total,prev, pager, next, jumper"
        :total="getOrderForm.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import * as order from '@/utils/order.js'
import { outExportExcel } from '@/api/exportData.js'

export default {
  name: 'OrderIndex',
  data() {
    return {
      showOrderList: [],
      orderList: [],
      hasData: false,
      dataText: '',
      // 被选中的订单数组,有handleSelectionChange处理
      selectionOrdersId: [],
      // dialog的显示消失控制
      dialogTableVisible: true,
      // 整个dialog的form表单都不能修改
      dialogFormDisable: true,
      dialogOrderForm: null,
      getOrderForm: {
        current: 1,
        size: 15,
        total: 0,
        pages: 0
      },
      // 订单状态过滤
      statusFilter: '',
      options: [
        {
          value: 0,
          text: '未支付'
        }, {
          value: 1,
          text: '已支付'
        }, {
          value: 2,
          text: '已发货'
        }, {
          value: 3,
          text: '已取消'
        }, {
          value: 4,
          text: '已完成'
        }, {
          value: 5,
          text: '已超时'
        }
      ],
      // 时间范围查询,一个时间数组，两个date字符串
      timeFilter: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      order.getOrderList(this.getOrderForm).then((res) => {
        // console.log(res)
        if (res.object.records && res.object.records.length > 0) {
          this.hasData = true
        } else {
          // this.$message('暂无订单数据')
          this.dataText = '暂无数据'
        }
        this.setOrderListAndPage(res)
      })
    },

    // 设置orderList和分页返回的相关数据res
    setOrderListAndPage(res) {
      this.orderList = res.object.records
      this.showOrderList = res.object.records
      this.getOrderForm.total = res.object.total
      this.getOrderForm.size = res.object.size
      this.getOrderForm.pages = res.object.pages
    },
    // 重置分页条件
    resetGetOrderForm() {
      const obj = {
        current: 1,
        size: 20,
        total: 0,
        pages: 0
      }
      this.getOrderForm = obj
    },
    // 前往订单详情页面
    toDetail(index, obj) {
      this.$router.push(`/order/detail/${obj.id}`)
    },
    handleCurrentChange(val) {
      // 判断是否有时间filter，有则查询时间filter，无则查询所有
      if (this.timeFilter && this.timeFilter.length === 2) {
        const orderQo = {
          from: this.timeFilter[0] + ' 00:00:00',
          to: this.timeFilter[1] + ' 23:59:59'
        }
        order.timeFilter(orderQo, this.getOrderForm).then(res => {
          this.setOrderListAndPage(res)
        })
      } else {
        this.getList()
      }
    },
    // 点击时间范围查询
    timeQuery() {
      // console.log(this.timeFilter.length)
      if (this.timeFilter && this.timeFilter.length === 2) {
        // 时间范围查询
        const orderQo = {
          from: this.timeFilter[0] + ' 00:00:00',
          to: this.timeFilter[1] + ' 23:59:59'
        }
        this.resetGetOrderForm()
        order.timeFilter(orderQo, this.getOrderForm).then(res => {
          this.setOrderListAndPage(res)
        })
      } else {
        // 全部查询
        this.getList()
      }
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handeleOutExportExcel() {
      const tableHeader = ['ID', '订单号', '订单状态', '价格', '数量', '总价', '用户ID', '图书ID', '地址ID', '创建时间', '完成时间']
      const tableKey = ['id', 'orderNum', 'status', 'price', 'num', 'totalPrice', 'fkUserId', 'fkBookId', 'orderAdd', 'createTime', 'finishTime']
      outExportExcel(
        tableHeader,
        tableKey,
        this.orderList
      )
    }
  }
}
</script>
<style>
/* .el-table__expanded-cell */
.el-table .el-table__row td,
.el-table th {
  text-align: center !important;
}
</style>
<style scoped lang="scss">
.order-container {
  margin: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.block {
  margin-top: 20px;
  text-align: center;
}
.filter-div{
  margin-top: 40px;
  margin-left: 40px;
  // display: flex;
  // justify-content: space-around;
}
</style>
